<template>
  <div class="search-popup">
    <van-search
      v-model="searchval"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
      @cancel="onCancel"
      @input="onInput"
    />

    <HistoryHot
      v-if="blockShow === 1"
      :historyKeywordList="historyKeywordList"
      :hotKeywordList="hotKeywordList"
      @tagClick="tagClick"
      @remenClick="remenClick"
    ></HistoryHot>
    <SearchProductList
      v-else-if="blockShow === 2"
      :productsListData="productsListData"
      :filterCategory="filterCategory"
      @categoryChangefenlei="categoryChange"
      @jiagedepaixu="jiagechange"
    ></SearchProductList>
    <SearchTipsList
      v-else-if="blockShow === 3"
      :tipslist="tipslist"
      @callClick="callClick"
    ></SearchTipsList>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import HistoryHot from "../components/search/HistoryHot.vue";
import SearchProductList from "../components/search/SearchProductList.vue";
import SearchTipsList from "../components/search/SearchTipsList.vue";
import { sousuoAPI, tishiAPI, GoodsListAPI } from "../../request/api";

export default {
  data() {
    return {
      searchval: "",
      blockShow: 1,
      // 1表示历史和热门
      // 2.搜索提示列表
      // 3表示搜索产品列表
      defaultKeyword: [],
      historyKeywordList: [],
      hotKeywordList: [],
      //   提示数组
      tipslist: [],
      // 搜索产品的数据
      productsListData: [],
      // 删选栏数据
      filterCategory: [],
      // 分类id
      categoryId: 0,
      // 排列顺序，desc表示价格由高到低，asc表示价格由低到高
      order: "desc",
      // sort 可以是id或price 排序方式
      sort: "id",
    };
  },
  components: { HistoryHot, SearchProductList, SearchTipsList },
  methods: {
    ...mapMutations({
      chanisshowpopup: "showshadow/chanisshowpopup",
    }),
    categoryChange(id) {
      this.categoryId = id;
      this.onSearch(this.searchval);
    },
    jiagechange(value) {
      this.sort = "price";
      this.order = value;
      this.onSearch(this.searchval);
    },
    tagClick(value) {
      this.onSearch(value);
    },
    remenClick(value) {
      this.onSearch(value);
    },
    callClick(value) {
      this.onSearch(value);
    },
    onSearch(value) {
      // console.log("1", value);
      this.blockShow = 2;
      GoodsListAPI({
        keyword: value,
        categoryId: this.categoryId,
        order: this.order,
        sort: this.sort,
      }).then((res) => {
        console.log(res);
        this.productsListData = res.data.data;
        this.filterCategory = res.data.filterCategory;
        // console.log(res.data.filterCategory);
        let newArr = this.filterCategory.map((item) => {
          return { text: item.name, value: item.id, checked: item.checked };
        });
        this.filterCategory = newArr;
      });
    },
    onCancel() {
      console.log("2");
      this.$router.go(-1);
      this.chanisshowpopup(false);
    },
    onInput(value) {
      // 切换到第3个界面
      this.blockShow = 3;
      //   发送请求
      tishiAPI({
        keyword: value,
      }).then((res) => {
        if (res.errno == 0) {
          console.log(res.data);
          this.tipslist = res.data;
        }
      });
    },
  },

  created() {
    sousuoAPI().then((res) => {
      console.log(res.data);
      if (res.errno == 0) {
        let { defaultKeyword, historyKeywordList, hotKeywordList } = res.data;
        this.defaultKeyword = defaultKeyword;
        this.historyKeywordList = historyKeywordList;
        this.hotKeywordList = hotKeywordList;
      }
    });
  },
};
</script>
 
<style lang="less" scoped>
.search-popup {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-color: #efefef;
}
</style>